<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>bootstrap</title>
	<link href="css/bootstrap.css" rel="stylesheet">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<style>
		hr{
			border: 1px solid #666;
		}
		body{
			margin: 80px;
		}
	</style>
</head>
<body>
	<!-- collapse折叠插件，通过点击可以折叠内容 -->

	<button class="btn btn-primary" data-toggle="collapse" data-target="#content">Doyoudo</button>
	<br>
	<br>

	<div class="collapse" id="content">
		<div class="well">
			welcome to Doyoudo
		</div>
	</div>

	<br>
	<br>

	<button class="btn btn-warning" data-toggle="collapse" id="btn">折叠内容</button>
	<hr>


	<div class="panel-group" id="Doyoudo">
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a role="button" data-toggle="collapse" href="#content1">
	          Collapsible Group Item #1
	        </a>
	      </h4>
	    </div>
	    <div id="content1" class="panel-collapse collapse in">
	      <div class="panel-body">
	        content1
	      </div>
	    </div>
	  </div>
	  <div class="panel panel-default">
	    <div class="panel-heading">
	      <h4 class="panel-title">
	        <a class="collapsed" data-toggle="collapse" href="#content2">
	          Collapsible Group Item #2
	        </a>
	      </h4>
	    </div>
	    <div id="content2" class="panel-collapse collapse">
	      <div class="panel-body">
	       content2
	      </div>
	    </div>
	  </div>
	  <div class="panel panel-default">
	    <div class="panel-heading" role="tab" id="headingThree">
	      <h4 class="panel-title">
	        <a class="collapsed"  data-toggle="collapse" href="#content3">
	          Collapsible Group Item #3
	        </a>
	      </h4>
	    </div>
	    <div id="content3" class="panel-collapse collapse">
	      <div class="panel-body">
	      	content3
	      </div>
	    </div>
	  </div>
	</div>

	
	<script>
		$('#btn').click(function(){
			$('#content').collapse('toggle');
		});
	</script>






</body>
</html>